import React, { Component } from 'react';
import { NavBar, Toast, Cascader, Space, Button, Switch } from 'antd-mobile'
import service from '../api'
import '../styles/Edit.scss'
import options from '../store/data'
class Newadd extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            value: [],
            valuepending: [],
            options: options,// 地址选择列表
            name: '',// 姓名
            tel: '',// 手机号
            province: '', //省
            city: '', //市
            county: '', //区
            addressDetail: '',//详细地址
            addressid: '',
            list: {},
            checked: false,
        }
    }

    // 顶部回退上一页组将方法
    back() {
        this.props.history.go(-1)
    }
    onchange(e) {
        this.setState({
            [e.target.name]: e.target.type == 'checkbox' ? e.target.checked : e.target.value
        })
    }
    // 点击删除
    async delete() {
        console.log(this.props.location.state.addressid);
        var res1 = await service.address.address_delete({ addressid: this.props.location.state.addressid })
        if (res1.data.code == 200) {
            Toast.show(res1.data.message)
            this.props.history.push('/address')
        }
    }
    // 挂载区地址列表回显
    componentDidMount() {
        this.setState({ name: this.props.location.state.name, tel: this.props.location.state.tel, value: [this.props.location.state.province, this.props.location.state.city, this.props.location.state.county], addressDetail: this.props.location.state.addressDetail, checked: this.props.location.state.isDefault })
    }
    //  点击保存
    async save() {
       
        var res = await service.address.address_update({ addressid: this.props.location.state.addressid, userid: localStorage.getItem('userid'), name: this.state.name, tel: this.state.tel, province: this.state.value[0], city: this.state.value[1], county: this.state.value[2], addressDetail: this.state.addressDetail, isDefault: this.state.checked })
        if (res.data.code == 200) {
            Toast.show(res.data.message)
            this.props.history.push('/address')
        }
    }
    //地区选择组件方法
    setVisible(bl) {
        this.setState({ visible: bl })
    }
    //地区选择组件
    RenderChildrenDemo() {
        return (
            <Space align='center'>
                <Button
                    onClick={() => {
                        this.setVisible(true)
                    }}
                >
                    选择地区
                </Button>
                <Cascader
                    options={this.state.options}
                    visible={this.state.visible}
                    onClose={() => {
                        this.setVisible(false)
                    }}
                    value={this.state.valuepending}
                    onSelect={(val, extend) => {
                        this.setState({ value: val })
                    }}
                >

                </Cascader>
            </Space>
        )
    }
    //获取复选框的默认呈现
    setchecked() {
        console.log(111);
        this.setState({ checked: !this.state.checked })
    }
    render() {
        return (
            <div className='edit'>
                <NavBar className='top' onBack={() => { this.back() }}>编辑地址</NavBar>
                <div className="ress">
                    <div className='inpu'>
                        <span>姓名</span>
                        <input type="text" placeholder='姓名' name='name' value={this.state.name} onChange={(e) => { this.onchange(e) }} />
                    </div>
                    <div className='inpu'>
                        <span>电话</span>
                        <input type="text" placeholder='电话' name='tel' value={this.state.tel} onChange={(e) => { this.onchange(e) }} />
                    </div>
                    <div className='city'>
                        {this.RenderChildrenDemo()}
                        <span>{this.state.value.join('--')}</span>
                    </div>
                    <div className='inpu'>
                        <span>详细地址</span>
                        <input type="text" placeholder='详细地址' name='addressDetail' value={this.state.addressDetail} onChange={(e) => { this.onchange(e) }} />
                    </div>
                    <div className='chebox'>
                        <span>设置为默认地址</span>
                        <Switch checked={this.state.checked} onChange={() => { this.setchecked() }} />
                    </div>
                    <div className='inpu'>
                        <button className='btn' onClick={() => { this.save() }}>保存</ button>
                    </div>
                    <div className='inpu'>
                        <button className='dele' onClick={() => { this.delete() }}>删除</button>
                    </div>


                </div>
            </div>
        );
    }
}

export default Newadd;